<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./js/index.js"></script>
    <script src="./layui/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="layui-container" style="height: 1000px;">


    <div class="layui-row layui-bg-cyan" style="height: 150px;">
        <div class="layui-col-md3">
            logo
            <img alt="" src="">
        </div>
        <div class="layui-col-md2 layui-col-md-offset5">搜索框</div>
        <div class="layui-col-md2">头像信息</div>
    </div>

    <!-- 轮播图 -->
    <div class="layui-row">
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div>
                    <img src="./images/1.png" alt="" style="height: 100%; width: 100%;">
                </div>
                <div>
                    <img src="./images/2.png" alt="" style="height: 100%; width: 100%;">
                </div>
                <div>
                    <img src="./images/3.png" alt="" style="height: 100%; width: 100%;">
                </div>
                <div>
                    <img src="./images/4.png" alt="" style="height: 100%; width: 100%;">
                </div>
                <div>
                    <img src="./images/5.png" alt="" style="height: 100%; width: 100%;">
                </div>

            </div>
        </div>
        <script>
            layui.use('carousel', function () {
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#test1',
                    width: '100%' //设置容器宽度
                    ,
                    arrow: 'always' //始终显示箭头
                    ,
                    anim: 'fade' //切换动画方式
                    ,
                    height: '400px'
                });
            });
        </script>
        <!-- 菜单 -->
        <div id="leftMenu" class="layui-row" style="top: -400px; left: -30px;">
            <div class="layui-col-md6 layui-col-md-offset1">
                <ul id="p" style="height: 400px;width: 200px;">
                    <script>

                        function getSubjects(jid, nid) {
                            console.info(jid, nid);//2  9

                            $.ajax({
                                url: "phase/findSubjectsByJidAndNid?jid=" + jid + "&nid=" + nid,
                                type: "get",
                                success: function (res) {
                                    console.info(res);
                                    var content = "";
                                    var ul = document.getElementById(jid + "" + nid);
                                    for (var i = 0; i < res.grades[0].subjects.length; i++) {
                                        var subject = res.grades[0].subjects[i];
                                        var li = "<li><a href='detail.html?jid=" + jid + "&nid=" + nid + "&sid=" + subject.sid + "'>" + subject.name + "</a></li>"
                                        content += li;
                                    }
                                    ul.innerHTML = content;
                                }
                            });
                        }

                        //获取年级信息
                        function getGrades(jid) {
                            console.info(jid);
                            $.ajax({
                                url: "phase/findGradesByJid?jid=" + jid,
                                type: "get",
                                success: function (res) {
                                    console.info(res);
                                    var ul = document.getElementById(jid);
                                    var content = "";
                                    for (var i = 0; i < res.grades.length; i++) {
                                        var grade = res.grades[i];
                                        var li = "<li><a href='#' onmouseover='getSubjects(" + jid + "," + grade.nid + ")'>" + grade.name + "</a><ul id='" + jid + grade.nid + "'></ul></li>";
                                        content += li;
                                    }
                                    ul.innerHTML = content;
                                }
                            });
                        }

                        //一级菜单
                        $.ajax({
                            url: "phase/all",
                            type: "get",
                            success: function (res) {
                                console.info(res);
                                var p = document.getElementById("p");
                                var content = "";
                                for (var i = 0; i < res.length; i++) {
                                    var phase = res[i];
                                    var li = "<li><a href='detail.html?jid=" + phase.jid + "' onmouseover='getGrades(" + phase.jid + ")'>" + phase.name + "</a><ul id='" + phase.jid + "'></ul></li>";
                                    content += li;
                                }
                                p.innerHTML = content;
                            }
                        });
                    </script>
                </ul>
            </div>
        </div>
    </div>

    <!--精品课程-->
    <div class="layui-row" style="top: 0px;">
        <div class="layui-tab">
            <ul class="layui-tab-title" id="tul">
                <script>
                    $.ajax({
                        url: "phase/all",
                        type: "get",
                        success: function (res) {
                            console.info(res);
                            var tul = document.getElementById("tul");

                            var content = "<li class='layui-this'>" + res[0].name + "</li>";

                            for (var i = 1; i < res.length; i++) {
                                var phase = res[i];
                                var li = "<li>" + phase.name + "</li>"
                                content += li;
                            }
                            tul.innerHTML = content;
                        }
                    });

                </script>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
            </div>
        </div>
        <script src="./layui/lay/modules/element.js"></script>
        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function () {
                var element = layui.element;

                $.ajax({
                    url: "phase/all",
                    type: "get",
                    success: function (res) {
                        console.info(res);
                    }
                });

                element.render("tab");
            });
        </script>
    </div>
</div>
</body>
</html>
